<template>
    <div class="seckill-list">
        <!-- TODO:完成秒杀列表 推荐列表 -->
        <!-- 展示商品数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
            <template #default="scope">
                <div class="imgs">
                    <span>商品图片</span>
                    <img :src="scope.row.img1" alt="">
                    <img :src="scope.row.img2" alt="">
                    <img :src="scope.row.img3" alt="">
                    <img :src="scope.row.img4" alt="">
                </div>
                <p>
                    <span>商品名称：</span>
                    {{ scope.row.proname}}
                </p>
                <p>
                    <span>商品描述：</span>
                    {{ scope.row.desc }}
                </p>
                <p>
                    <span>商品库存：</span>
                    {{ scope.row.stock }}
                </p>
            </template>
        </el-table-column>
    <el-table-column type="index" label="序号"  />
    <el-table-column prop="img" label="商品图片" >
        <template #default="scope">
            <img :src="scope.row.img1" alt="" style="width: 100px;">
        </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" />
    <el-table-column prop="brand" label="品牌" />
    <el-table-column prop="category" label="分类" />
    <el-table-column prop="originprice" label="原价" />
    <el-table-column prop="discount" label="折扣" />
      <el-table-column prop="sales" label="销量" />
      <el-table-column prop="" label="是否推荐" >
        <template #default="scope">
            <el-switch
    v-model="scope.row.isrecommendable"
    inline-prompt
    active-text="是"
    inactive-text="否"
    @change="changeGoods(scope.row,'isrecommend')"
  />
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" >
        <template #default>
            <el-button type="danger" >删除</el-button>
        </template>
      </el-table-column>>
  </el-table>
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizeAll"
    
    
      
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<script>
import {getGoodsListAPI,changeGoodsAPI} from '@/api/goods.js'
// import { ElMessage } from 'element-plus'

    export default {
        data(){
            return{
                tableData:[],
                // 分页相关变量
                currentPage: JSON.parse(sessionStorage.getItem('currentPage'))||1,
                pageSize:JSON.parse(sessionStorage.getItem('pageSize'))|| 10,
                pageSizeAll:[10,20,30,40],
                total:0
            }
        },
        methods:{
            loadGoodsList(){
                getGoodsListAPI({
                    count:this.currentPage,
                    limitNum:this.pageSize
                }).then(res=>{
                    console.log(res);
                    if(res.data.code == 200){
                        this.tableData = res.data.data.map(item =>{
                            return{
                                ...item,
                                isrecommendable: item.isrecommend == 1
                            }
                        })
                    }
                    // 设置查询到数据的总 记录数
                    this.total = res.data.total
                })
            },
        changeGoods(row,mark){
            changeGoodsAPI({
                proid:row.proid,
                type: mark,
                flag:row.isseckillable
            })
            // .then(res=>{
            //     if(res.data.code == 200){
            //         ElMessage({
            //             message: '修改成功',
            //             type: 'success',
            //         })
            //     }
            // })
            

        },
        handleSizeChange(){
            // 每次点击第几页的时候触发 就重新加载当前页面
            this.loadGoodsList()
            // 将点击的值存起来
            sessionStorage.setItem('pageSize',this.pageSize)
        },
        // 将当前页显示多少条数据也一样存起来
        handleCurrentChange(){
            this.loadGoodsList()
            sessionStorage.setItem('currentPage',this.currentPage)
        }

        },
        created(){
            this.loadGoodsList()
        }
    }
</script>

<style lang="less" scoped>
.seckill-list {
    width: 100%;
    height: 100%;
}
.imgs img {
  vertical-align: middle;
  width: 80px;
  margin-right: 20px;
  border-radius: 15px;
}
</style>